<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>with-终极this应用 </title>
</head>
<body>
<h1>with-终极this应用</h1>
<!--基础html框架-->
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>兴趣爱好</th>
            <th>爱谁</th>
        </tr>
    </thead>
    <tbody id="tableList">
    </tbody>
</table>
<!-- 引用插件 -->
<script type="text/javascript" src="/static/js/jquery-3.1.1.js"
        charset="utf-8"></script>
<script type="text/javascript" src="/static/js/handlebars-v4.0.2.js"
        charset="utf-8"></script>
<%-- 显示数据的模板 --%>
<script id="table-template" type="text/x-handlebars-template">
    {{#each this}}
        <tr>
            <td>{{name}}</td>
            <td>{{sex}}</td>
            <td>{{age}}</td>
            <td>
                {{#with favorite}}
                    {{#each this}}
                        <p>{{this}}</p>
                    {{/each}}
                {{/with}}
            </td>
            <td>
                {{love}}
            </td>
        </tr>
    {{/each}}

</script>
<script type="text/javascript">
    $(document).ready(function(){
        //模拟json对象
        var data = [
            {
                "name":"张三",
                "sex":"0",
                "age":18,
                "favorite":
                    [
                        "唱歌",
                        "篮球"
                    ],
                "love":"嘴哥-"
            },
            {
                "name":"李四",
                "sex":"0",
                "age":18,
                "favorite":
                        [
                            "泡妞",
                            "上网"
                        ],
                "love":"嘴哥-"
            },
            {
                "name":"嘴哥",
                "sex":"0",
                "age":22,
                "favorite":
                        [
                            "泡妞",
                            "看动物"
                        ],
                "love":"嘴哥-"
            }
        ];
        //编译模板
        var myTemplate = Handlebars.compile($("#table-template").html());
        //将json对象,用刚刚注册的Handlebars模板封装,得到最终的html,插入到基础的table中
        $('#tableList').html(myTemplate(data));
    });
    //本例和上例不同之处在于favorite属性中不再是map项，而是普通字符串，因此对于每个项，可以直接用{{this}}读取，this代表当前字符串。
</script>
</body>
</html>